<template>
    <div>
        <el-menu class="background">
            <el-sub-menu :index="(index + 1).toString()" v-for="(item, index) in navList" :key="index"
                class="background">
                <template #title>

                    <el-icon v-if="index == 0">
                        <Sugar />
                    </el-icon>
                    <el-icon v-else-if="index == 2">
                        <Lollipop />
                    </el-icon>
                    <el-icon v-else-if="index == 1">
                        <ColdDrink />
                    </el-icon>
                    <el-icon v-else-if="index == 3">
                        <Burger />
                    </el-icon>
                    <span>{{ item.catagory }}</span>
                </template>
                <el-menu-item class="background" :index="((index + 1) + '-' + (i + 1)).toString()"
                    v-for="(item, i) in item.list" :key="i" @click="ClickHandle(item.cid)">{{ item.name }}
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>



<script>
import axios from 'axios';

export default {
    data() {
        return {
            navList: []
        }
    },
    mounted() {
        axios.get('navlist.json').then(res => {
            this.navList = res.data.navList
        })
    },
    components: {

    },
    methods: {
        ClickHandle(cid) {
            this.$emit('handle', cid)
            console.log(cid)
        },
    },
}
</script>



<style scoped>
.background {
    background: rgb(255, 255, 255, 0);

}

/* * 鼠标悬停时设置透明背景，同时保持字体清晰 */
.el-menu-item:hover,
::v-deep .el-sub-menu__title:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* 设置背景为半透明 */
    color: #f99 !important;
    /* 字体保持白色 */

}

/* 一级菜单和二级菜单正常状态的字体颜色 */
.el-menu-item,
::v-deep .el-sub-menu .el-sub-menu__title {
    color: #000;
}

/* 取消下划线 */


/* 二级菜单的 hover 状态调整 */
.el-menu--horizontal .el-menu .el-menu-item:not(.is-disabled):hover,
.el-sub-menu__title.el-tooltip__trigger.el-tooltip__trigger:hover {
    color: #000 !important;
    /* 确保字体为白色 */

}

/* 点击后激活的菜单项字体颜色 */
.el-menu-item.is-active,
::v-deep .el-menu-item.is-active {
    color: #f99 !important;
    /* 改成金色，或其他你喜欢的颜色 */
    font-weight: bold;
    /* 可选：让激活项字体加粗 */
    background-color: rgba(43, 247, 213, 0.1) !important;
    /* 可选：设置背景颜色 */


}

::v-deep(.el-menu--inline) {
    background-color: rgb(255, 255, 255, 0) !important;
    /* 设置为浅灰色 */
}
</style>
